<template>
  <view class="index">
    <text @tap="showPop">{{ startMonth + "——" + endMonth }}</text>
    <Inputpicker
      @cancelVisible="cancelVisible"
      @okVisible="okVisible"
      :maskVisible="maskVisible"
      :showpop="showpop"
    />
  </view>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import "./index.less";
import Inputpicker from "../../components/inputPicker/index";
import moment, { months } from "moment";
export default {
  components: {
    Inputpicker,
  },
  setup() {
    const state = reactive({
      startMonth: moment().subtract(1, "year").format("YYYY-MM-DD"),
      endMonth: moment(new Date()).format("YYYY-MM-DD"),
      maskVisible: false,
      showpop: false,
    });
    let okVisible = (val) => {
      (state.startMonth = val.startTime),
        (state.endMonth = val.endTime),
        (state.maskVisible = false),
        (state.showpop = false);
    };
    let cancelVisible = (val) => {
      state.maskVisible = false;
      state.showpop = false
    };
    let showPop = () => {
      state.maskVisible = true;
      state.showpop = true;
    };
    return {
      ...toRefs(state),
      okVisible,
      showPop,
      cancelVisible
    };
  },
};
</script>
